import { githubUser } from "@/utils/api";
import React from "react";
import { PlayerInput } from "./PlayerInput";
import { PlayerResult } from "./PlayerResult";
import styles from "./Battle.less";

export class Battle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      player1: null,
      player2: null,
      hasResult: false,
    };
  }

  async componentDidMount() {
    const { p1, p2, hasResult } = this.props.query;
    if (hasResult) {
      if (!p1) {
        return this.setState({
          errMsg: "p1参数缺失, 重新battle",
        });
      }
      if (!p2) {
        return this.setState({
          errMsg: "p2参数缺失, 重新battle",
        });
      }
      const task1 = githubUser(p1);
      const task2 = githubUser(p2);
      const ret1 = await task1;
      const ret2 = await task2;
      // 初始化的错误暂时放控制台吧
      if (ret1.code !== 200)
        return this.setState({
          errMsg: `p1获取失败:${ret1.desc}`,
        });
      if (ret2.code !== 200)
        return this.setState({
          errMsg: `p2获取失败:${ret2.desc}`,
        });

      this.setState({
        errMsg: null,
        player1: ret1.data,
        player2: ret2.data,
        hasResult: true,
      });
    }
    return null;
  }

  onClearInput(playerKey) {
    this.setState({
      [playerKey]: null,
      [`${playerKey}Loading`]: false,
    });
  }

  async onSubmitPlayer(playerKey, values, resolve) {
    const ret = await githubUser(values.loginname);
    if (ret.code !== 200) return resolve(ret.desc);
    this.setState({
      errMsg: null,
      [playerKey]: ret.data,
    });
    return null;
  }

  onBattle = () => {
    const { player1, player2 } = this.state;
    this.setState({
      errMsg: null,
      hasResult: true,
    });
    // 当前状态推到路由
    this.props.onRouteUrlQuery?.call(this, {
      p1: player1.login,
      p2: player2.login,
      hasResult: "1",
    });
  };

  onReset = () => {
    this.setState({
      player1: null,
      player2: null,
      hasResult: false,
    });
    // 当前状态推到路由
    this.props.onRouteUrlQuery?.call(this, { p1: "", p2: "" });
  };

  render() {
    const { player1, player2, hasResult, errMsg } = this.state;
    const infoMatch = !!player1 && !!player2;
    let player1Title = "";
    let player2Title = "";
    if (hasResult && infoMatch) {
      if (player1.public_repos === player2.public_repos) {
        player1Title = "Dogfall!!";
        player2Title = "Dogfall!!";
      } else if (player1.public_repos > player2.public_repos) {
        player1Title = "Winner!!";
        player2Title = "Loser";
      } else {
        player1Title = "Loser";
        player2Title = "Winner!!";
      }
    }
    return (
      <div>
        {infoMatch && hasResult ? (
          <div>
            <div className={styles.wrap}>
              <PlayerResult title={player1Title} playerInfo={player1} />
              <PlayerResult title={player2Title} playerInfo={player2} />
            </div>
            <div className="text-center">
              <button type="button" onClick={this.onReset}>
                Back!
              </button>
            </div>
          </div>
        ) : (
          <div>
            {infoMatch && (
              <div className="text-center">
                {" "}
                <button type="button" onClick={this.onBattle}>
                  Battle!
                </button>
              </div>
            )}
            {!!errMsg && <div className="text-center">{errMsg}</div>}
            <div className={styles.wrap}>
              <PlayerInput
                title="Player One"
                playerInfo={player1}
                onClearInput={() => this.onClearInput("player1")}
                onSubmitPlayer={(values, resolve) =>
                  this.onSubmitPlayer("player1", values, resolve)
                }
              />
              <PlayerInput
                title="Player Two"
                playerInfo={player2}
                onClearInput={() => this.onClearInput("player2")}
                onSubmitPlayer={(values, resolve) =>
                  this.onSubmitPlayer("player2", values, resolve)
                }
              />
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default Battle;
